<template>
  <div class="box">
    <div class="top">
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="4">
          <div
            style="border-radius:20px;cursor: pointer;height:90px;border: 1px solid #ccc;display: flex;flex-direction: column;align-items: center;justify-content: center;"
            :style="carInfo.Allstatus === '' ? 'background:#66b1ff' : ''"
            @click="statusAll('')"
          >
            <span>{{ statistics.allTotal }}</span>
            <span class="carStatue">总下架车辆</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div
            style="border-radius:20px;cursor: pointer;height:90px;border: 1px solid #ccc;display: flex;flex-direction: column;align-items: center;justify-content: center;"
            :style="carInfo.Allstatus === '110' ? 'background:#66b1ff' : ''"
            @click="statusAll('110')"
          >
            <span>{{ statistics.autonomyTotal }}</span>
            <span class="carStatue">自主下架</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div
            style="border-radius:20px;cursor: pointer;height:90px;border: 1px solid #ccc;display: flex;flex-direction: column;align-items: center;justify-content: center;"
            :style="carInfo.Allstatus === '402' ? 'background:#66b1ff' : ''"
            @click="statusAll('402')"
          >
            <span>{{ statistics.soldTotal }}</span>
            <span class="carStatue">已售出</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div
            style="border-radius:20px;cursor: pointer;height:90px;border: 1px solid #ccc;display: flex;flex-direction: column;align-items: center;justify-content: center;"
            :style="carInfo.Allstatus === '403' ? 'background:#66b1ff' : ''"
            @click="statusAll('403')"
          >
            <span>{{ statistics.cancelTotal }}</span>
            <span class="carStatue">已取消 </span>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="seach">
      <el-row :gutter="20" style="display:flex">
        <el-col :span="6" style="min-width:399px">
          <span class="lable">车源ID</span>
          <span class="label_input">
            <el-input v-model="carInfo.carId" placeholder="请输入内容" />
          </span>
        </el-col>
        <el-col :span="5" style="min-width:330px">
          <span class="lable">用户ID</span>
          <span class="label_input">
            <el-input v-model="carInfo.userId" placeholder="请输入内容" />
          </span>
        </el-col>
        <el-col :span="5" style="min-width:330px">
          <span class="lable">VIN</span>
          <span
            class="label_input"
          ><el-input v-model="carInfo.vin" placeholder="请输入内容" />
          </span>
        </el-col>
        <el-col :span="8" style="min-width:530px">
          <span class="lable">上牌地</span>
          <span style="display:flex" class="label_input">
            <el-select
              v-model="carInfo.applyProvid"
              style="margin-right:20px"
              placeholder="请选择省份"
              filterable
              clearable
              @change="changeProvid"
            >
              <el-option
                v-for="item in carInfo.optionsProvid"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <el-select
              v-model="carInfo.applyCity"
              placeholder="请选择市区"
              :disabled="!carInfo.applyProvid"
              filterable
              clearable
            >
              <el-option
                v-for="item in carInfo.optionscity"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </span>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top:30px;display:flex">
        <el-col :span="7" style="min-width:462px">
          <span class="lable">上牌时间</span>
          <span class="label_input">
            <el-date-picker
              v-model="carInfo.applyTime"
              type="daterange"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </span>
        </el-col>
        <el-col :span="8" style="min-width:520px">
          <span class="lable">下架时间</span>
          <span class="label_input">
            <el-date-picker
              v-model="carInfo.createCarTime"
              type="daterange"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </span>
        </el-col>

        <el-col :span="5" style="min-width:330px">
          <span class="lable">状态</span>
          <span class="label_input">
            <el-select v-model="carInfo.status" placeholder="请选择" clearable>
              <el-option
                v-for="item in carInfo.statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </span>
        </el-col>
        <el-col :span="2" style="min-width:130px">
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%;margin-top:30px"
      border
    >
      <el-table-column type="index" width="50" label="序号" align="center" />
      <el-table-column
        v-for="item in params"
        :key="item.code"
        :label="item.text"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="item.text === '状态'">
            <!-- "childrenStatus": null, //状态：110-自主下架、402-已售出、403-已取消 -->
            {{
              scope.row[item.paramsCode] == "401"
                ? "已下架"
                : scope.row[item.paramsCode] == "402"
                  ? "已售出"
                  : scope.row[item.paramsCode] == "403"
                    ? "已关闭"
                    : ""
            }}
          </span>
          <span v-else-if="item.text == '下架原因'">
            <!-- "cancelCode": 103 //下架原因：101-卖家48小时未确认，102-买家48小时未确认，103-卖家车辆已售，104-卖家车辆暂不出售，105-检测下单失败，
            106-车辆存在事故情况，107-车辆存在火烧情况，108-车辆存在水泡情况，109-买家取消要车，110-自主下架，111-拉黑 -->
            {{
              scope.row.childrenStatus == "402"
                ? "已售出"
                : scope.row[item.paramsCode] == "101"
                  ? "卖家48小时未确认"
                  : scope.row[item.paramsCode] == "102"
                    ? "买家48小时未确认"
                    : scope.row[item.paramsCode] == "103"
                      ? "卖家车辆已售"
                      : scope.row[item.paramsCode] == "104"
                        ? "卖家车辆暂不出售"
                        : scope.row[item.paramsCode] == "105"
                          ? "检测下单失败"
                          : scope.row[item.paramsCode] == "106"
                            ? "车辆存在事故情况"
                            : scope.row[item.paramsCode] == "107"
                              ? "车辆存在火烧情况"
                              : scope.row[item.paramsCode] == "108"
                                ? "车辆存在水泡情况"
                                : scope.row[item.paramsCode] == "110"
                                  ? "自主下架"
                                  : scope.row[item.paramsCode] == "111"
                                    ? "拉黑"
                                    : scope.row[item.paramsCode] == "113"
                                      ? "买家6小时未支付服务费"
                                      : scope.row[item.paramsCode] == "114"
                                        ? "买家2小时未支付服务费"
                                        : scope.row[item.paramsCode] == "115"
                                          ? "卖家6小时未确认交车信息"
                                          : scope.row[item.paramsCode] == "116"
                                            ? "卖家6小时未确认提车信息"
                                            : ""
            }}
          </span>
          <span v-else-if="item.text === '售价'">
            {{ scope.row[item.paramsCode]? scope.row[item.paramsCode].toFixed(2):'' }}万

          </span>

          <span v-else>
            {{ scope.row[item.paramsCode] }}
          </span>
        </template>
      </el-table-column>
      <el-table-column width="50" label="操作" align="center">
        <template slot-scope="scope">
          <span
            style="cursor: pointer;"
            @click="goto(scope.row.carInfoId)"
          >详情</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="pagination.total > 0"
      :total="pagination.total"
      :page.sync="pagination.pageNum"
      :limit.sync="pagination.pageSize"
      @pagination="inquire"
    />
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'

export default {
  components: {
    Pagination
  },
  data() {
    return {
      loading: false,
      carInfo: {
        carId: '', // 车源ID
        userId: '', // 用户ID
        vin: '', // vin
        applyProvid: '', // 上牌省份
        applyCity: '', // 上牌地
        applyCityName: '', // 上牌地
        createCarTime: '', // 创建车源时间
        applyTime: '', // 上牌时间
        status: '', // 状态
        statusOptions: [
          {
            value: '0',
            label: '人车认证'
          },
          {
            value: '1',
            label: '车辆基础信息'
          },
          {
            value: '2',
            label: '车辆图片视频'
          },
          {
            value: '3',
            label: '车况描述'
          },
          {
            value: '4',
            label: '交车设置'
          },
          {
            value: '5',
            label: '上架服务'
          },
          {
            value: '6',
            label: '发布预览'
          }
        ],
        Allstatus: '',
        optionsProvid: [],
        optionscity: []
      },
      pagination: {
        pageSize: 20,
        pageNum: 1,
        total: 0
      },
      tableData: [],
      params: [
        {
          paramsCode: 'carSourceNo',
          text: '车源ID'
        },
        {
          paramsCode: 'outTime',
          text: '下架时间'
        },

        {
          paramsCode: 'userId',
          text: '用户ID'
        },
        {
          paramsCode: 'brandModel',
          text: '品牌车系'
        },
        {
          paramsCode: 'amount',
          text: '售价'
        },
        {
          paramsCode: 'vin',
          text: 'VIN'
        },
        {
          paramsCode: 'childrenStatus',
          text: '状态'
        },
        {
          paramsCode: 'cancelCode',
          text: '下架原因'
        }
      ],
      statistics: {}
    }
  },
  created() {
    this.$get('/web/areas/get/all/bsProvince').then(res => {
      if (res.data.code === '0') {
        this.carInfo.optionsProvid = res.data.data
        console.log('this', this.optionsProvid)
      }
    })
    this.totalTopEvent()
    this.inquire()
  },
  methods: {
    statusAll(e) {
      console.log('213')
      this.carInfo.Allstatus = e
      this.inquire()
      console.log(this.carInfo.Allstatus)
    },
    inquire() {
      const data = {
        queryRequest: {
          pageSize: this.pagination.pageSize, // 页大小
          pageNum: this.pagination.pageNum // 页码
        }, // 分页参数
        entity: {
          carSourceNo: this.carInfo.carId, // 车源ID
          userId: this.carInfo.userId, // 用户ID
          vin: this.carInfo.vin, // VIN
          spCity: this.carInfo.applyCityName, // 上牌城市
          offSaleStartTime: this.carInfo.createCarTime
            ? this.carInfo.createCarTime[0]
            : '', // 创建车源开始时间
          offSaleEndTime: this.carInfo.createCarTime
            ? this.carInfo.createCarTime[1]
            : '', // 创建车源结束时间
          licenStartTime: this.carInfo.applyTime
            ? this.carInfo.applyTime[0]
            : '', // 上牌开始时间
          licenEndTime: this.carInfo.applyTime ? this.carInfo.applyTime[1] : '', // 上牌结束时间
          childrenStatus: this.carInfo.Allstatus // 状态：101-未上架、102-审核中、103-被驳回、104-未上架被拉黑
        } // 查询参数
      }
      this.loading = true
      this.$post('/web/vehicleStayOffSale/list', data, 'json').then(res => {
        console.log('ress', res)
        if (res.data.code === '0') {
          this.tableData = res.data.data.rows
          this.pagination.total = res.data.data.total
          this.loading = false
        }
      })
    },
    changeProvid(e) {
      this.carInfo.applyCity = ''
      this.$get(`/web/areas/get/all/bsCity?provinceId=${e}`).then(res => {
        if (res.data.code === '0') {
          this.carInfo.optionscity = res.data.data
          // this.cityList = res.data.data
        }
      })
    },
    reset() {
      this.carInfo.carId = ''
      this.carInfo.userId = ''
      this.carInfo.vin = ''
      this.carInfo.applyProvid = ''
      this.carInfo.applyCity = ''
      this.carInfo.createCarTime = ''
      this.carInfo.applyTime = ''
      this.carInfo.status = ''
    },
    search() {
      this.pagination.pageSize = 20
      this.pagination.pageNum = 1
      if (this.carInfo.applyCity) {
        this.carInfo.optionscity.forEach(item => {
          if (item.id === this.carInfo.applyCity) {
            this.carInfo.applyCityName = item.name
          }
        })
      } else {
        this.carInfo.applyCityName = ''
      }
      this.inquire()
      console.log(this.carInfo)
    },
    goto(carInfoId) {
      this.$router.push('/carAdmin/soldCarList?carInfoId=' + carInfoId)
    },
    totalTopEvent() {
      this.$post(
        '/web/vehicleStayOffSale/statistics',
        {
          carSourceNo: '', // 车源ID
          userId: '', // 用户ID
          vin: '', // VIN
          spCity: '', // 上牌城市
          createStartTime: '', // 创建车源开始时间
          createEndTime: '', // 创建车源结束时间
          licenStartTime: '', // 上牌开始时间
          licenEndTime: '', // 上牌结束时间
          childrenStatus: '', // 状态：101-未上架、102-审核中、103-被驳回、104-未上架被拉黑
          putawayStep: '' // 上架步骤: 0人车认证、1车辆基础信息、2车辆图片视频、3车况描述、4发布信息、5发布服务、6发布预览
        },
        'json'
      ).then(res => {
        if (res.data.code === '0') {
          this.statistics = res.data.data
        }
        console.log('ress', res)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.box /deep/ {
  padding: 20px;
  margin: 20px;
  .el-range-separator {
    width: 7%;
  }
  .top {
    margin-bottom: 30px;
    .carStatue {
      margin-top: 20px;
    }
  }
  .seach {
    .el-col {
      display: flex;
      align-items: center;
      .lable {
        // min-width: 100px;
        margin-right: 20px;
      }
      .label_input {
        // min-width: 300px;
      }
    }
  }
}
</style>
